<template>
    <div class="page-top">
        <h-section title="阶段状态" v-if="stage === 1">
            <a-steps :current="newStage" size="small">
                <template #progressDot="{ title, prefixCls }">
                    <a-popover>
                        <template #content>
                            <div>开始：{{ getTime(title).startTime }}</div>
                            <div>结束：{{ getTime(title).endTime }}</div>
                        </template>
                        <span :class="`${prefixCls}-icon-dot`" />
                    </a-popover>
                </template>
                <a-step :title="val.name" v-for="(val, key) in stageInfo" :key="+key" />
            </a-steps>
        </h-section>
        <div style="position: relative" v-else>
            <slot />
            <flexbox>
                <a-steps :current="newStage" size="small" style="margin-top: 24px" v-if="!detail.relateId">
                    <template #progressDot="{ title, prefixCls }">
                        <a-popover>
                            <template #content>
                                <div>开始：{{ getTime(title).startTime }}</div>
                                <div>结束：{{ getTime(title).endTime }}</div>
                            </template>
                            <span :class="`${prefixCls}-icon-dot`" />
                        </a-popover>
                    </template>
                    <a-step v-for="(val, key) in stageInfo" :title="val.name" :key="+key" style="position: relative"> </a-step>
                </a-steps>
                <div>
                    <slot name="stepExtra" />
                </div>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
    props: {
        stage: {
            type: [Number, String],
            default: 0
        },
        stageInfo: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const getTime = (title: string) => {
            let key = '';
            for (key in props.stageInfo) {
                if (props.stageInfo[key].name === title) {
                    if (props.stageInfo[key].startTime) {
                        return props.stageInfo[key];
                    } else {
                        return {
                            startTime: '不详',
                            endTime: '不详'
                        };
                    }
                }
            }
            return {};
        };
        const newStage = computed(() => {
            return Object.keys(props.stageInfo).findIndex((item) => +item === +props.stage);
        });
        return { newStage, getTime };
    }
});
</script>
<style scoped lang="less">
.page-top {
    min-height: 144px;
    padding-bottom: 16px;
    box-sizing: border-box;
    background: #fff;
    // 防止进度条超出
    .ant-steps-item {
        width: 20px;
        flex: 0 0 9% !important;
    }
}
</style>